<template>
  <div id="app">
  <!-- 使用v-bind指令，动态绑定attribute -->
    <v-header :seller="seller"></v-header>
    <div class="tab-wrapper">
        <tab :tabs="tabs" :initialIndex="0"></tab>
    </div>
  </div>
</template>

<script>
// 2.引用
import VHeader from 'components/v-header/v-header'
import Tab from 'components/tab/tab'
import Goods from 'components/goods/goods'
import Ratings from 'components/ratings/ratings'
import Seller from 'components/seller/seller'
import { getSeller } from 'api'
// 解析url地址引入query-string库
import qs from 'query-string'

export default {
  name: 'app',
  data() {
    // 函数返回一个对象，里有一个数据为seller
    return {
      seller: {
        // 解析地址并拿到 id
        id: qs.parse(location.search).id
      }
    }
  },
  computed: {
    tabs() {
      return [
        {
          label: '商品',
          component: Goods,
          data: {
            seller: this.seller
          }
        },
        {
          label: '评价',
          component: Ratings,
          data: {
            seller: this.seller
          }
        },
        {
          label: '商家',
          component: Seller,
          data: {
            seller: this.seller
          }
        }
      ]
    }
  },
  // 在created 这个生命周期里呢调_getSeller这个方法
  created() {
    this._getSeller()
  },
  methods: {
    _getSeller() {
    // 因为封装的是axios返回的，所以是Promise对象，使用then返回避免错误
      getSeller({
        // 将 id 的值传回服务端
        id: this.seller.id
      }).then((seller) => {
        this.seller = seller
      })
    }
  },
  components: {
    // 1.注册
    VHeader,
    Tab
  }
}
</script>

<style lang="stylus">
#app
  .tab-wrapper
    position fixed
    top 136px
    left 0
    right 0
    bottom 0
</style>
